<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { useList, useTabs } from "@/hooks/page";
import { my_like_api } from "@/package/my/api/guider_home";
import { Router } from "@/utils/router";

import ListEmpty from "@/components/list/empty.vue";
import ListInterviewItem from "./components/list-interview-item.vue";
import ListNoteItem from "./components/list-note-item.vue";
import ListMore from "@/components/list/more.vue";

onLoad(() => tabChange({ detail: { current: 0 } }));

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return my_like_api({ ...query, type: 2 });
  });
const {
  listData: listData2,
  listStatus: listStatus2,
  listLoadMore: listLoadMore2,
  reloadList: reloadList2,
  loadMoreList: loadMoreList2,
} = useList({ page: 1, page_size: 10 }, (query) => {
  return my_like_api({ ...query, type: 4 });
});

const tabList = ["访谈", "笔记"];
const { tabData, tabCacheList, tabClick, tabChange } = useTabs(
  (index: number) => {
    index === 0 ? reloadList() : reloadList2();
  }
);

const interviewClick = (id: string) => {
  Router.navigateTo(`/package/famous-talk/pages/detail/index?id=${id}`);
};

const noteClick = (index: number) => {
  const note = listData2.value[index] as any;
  Router.navigateTo(
    note.text_type === 2
      ? `/package/guider/pages/note/detail2?id=${note.id}`
      : `/package/guider/pages/note/detail?id=${note.id}`
  );
};
</script>

<template>
  <view class="list-type">
    <view
      class="list-type-item"
      :class="{ 'list-type-active': tabData.index === d }"
      v-for="(i, d) of tabList"
      :key="d"
      @click="tabClick(d)"
    >
      {{ i }}
    </view>
  </view>

  <swiper class="list-swiper" :current="tabData.current" @change="tabChange">
    <swiper-item>
      <scroll-view
        class="list-data"
        scroll-y
        @scroll="listLoadMore = true"
        @scrolltolower="loadMoreList"
      >
        <ListEmpty v-if="listData.length === 0 && listStatus === 'noMore'" />
        <template v-else>
          <view class="list-data-wrapper">
            <view
              class="list-data-item"
              v-for="i of listData"
              :key="i.id"
              @click="interviewClick(i.id)"
            >
              <ListInterviewItem :info="i" />
            </view>
          </view>
          <ListMore
            v-if="listLoadMore"
            :status="listStatus"
            safeAreaInsetBottom
          />
        </template>
      </scroll-view>
    </swiper-item>

    <swiper-item>
      <scroll-view
        class="list-data"
        scroll-y
        @scroll="listLoadMore2 = true"
        @scrolltolower="loadMoreList2"
      >
        <ListEmpty v-if="listData2.length === 0 && listStatus2 === 'noMore'" />
        <template v-else>
          <view class="list-data-wrapper">
            <view
              class="list-data-item"
              v-for="(i, d) of listData2"
              :key="i.id"
              @click="noteClick(d)"
            >
              <ListNoteItem :info="i" />
            </view>
          </view>
          <ListMore
            v-if="listLoadMore2"
            :status="listStatus2"
            safeAreaInsetBottom
          />
        </template>
      </scroll-view>
    </swiper-item>
  </swiper>
</template>

<style lang="scss">
page {
  padding-bottom: 0;
}

.list-type {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80rpx;
  background-color: #ffffff;

  .list-type-item {
    padding: 0 80rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 60rpx;
  }

  .list-type-active {
    color: #333333;
    font-weight: bold;
  }
}

.list-swiper {
  height: calc(100vh - 80rpx);
}

.list-data {
  height: 100%;

  .list-data-wrapper {
    padding-top: 20rpx;
  }

  .list-data-item {
    margin: 0 20rpx 20rpx;
  }
}
</style>